<template>
	<view class="wrap" >
		<u-cell-group :border="false" :model="model" :rules="rules" ref="uForm">
			<u-gap height="20" bg-color="#f5f5f5"></u-gap>
			<u-field input-align="right" label="姓名" class="user-other" v-model="model.nickName" placeholder="请填写姓名"></u-field>
			<u-field label="性别" input-align="right" v-model="model.sex" placeholder="请填写性别,男或女"></u-field>
			<u-field label="身份证号" input-align="right"  v-model="model.idCard" placeholder="请填写身份证号码"></u-field>
			<u-field label="单位" input-align="right"   v-model="model.company" icon="home" placeholder="请填写单位"></u-field>
			<u-field label="血型"  input-align="right" required v-model="model.bloodType" placeholder="请填写血型A或者AB或者B或者O,大写"></u-field>
			<u-field label="手机号" input-align="right" required class="connect" icon="phone" v-model="model.phonenumber" placeholder="请填写手机号">
			</u-field>
		</u-cell-group>
<!-- 		<view class="form-footer">
			</u-field>
			        <u-field
			            v-model="code"
			            label="验证码"
			            placeholder="请填写验证码"
						 required
			        >
			        </u-field>
			<u-toast ref="uToast"></u-toast>
			<u-verification-code  ref="uCode" @change="codeChange">
			</u-verification-code>
			<u-button  @tap="getCode">获取验证码</u-button>
		</view> -->
		<u-button class="btn" type="primary" @click="submit">保存</u-button> 
	</view>

</template>
<script>
	/**
	 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
	 */
	export default {
		data() {
			return {
				model: {
					sex: '1'
				},
				rules: {

				},
				avatarBase64: '',
				mobile: '12345',
				code: 'eee',
				codeText: '111'
			};
		},
		onLoad() {
			this.$u.api.getUserInfo().then(res => {
				if (res.code == '200') {
					this.model = {
					userId: res.user.userId,
					nickName: res.user.nickName,
					sex: res.user.sex,
					email: res.user.email,
					avatar: res.user.avatar,
					phonenumber: res.user.phonenumber,
					officeTel: res.user.officeTel,
					idCard: res.user.idCard,
					bloodType: res.user.bloodType,
					company:res.user.company
					}
				} else if (res.code == '401') {
					uni.reLaunch({
						url: '/pages/sys/login/index'
					});
				} else {
					this.$u.toast(res.message);
				}
			});
			uni.$on('uAvatarCropper', path => {
				this.avatarBase64 = path;
			})
		},
		computed: {
			avatarUrl() {
				if (this.avatarBase64 != '') {
					return this.avatarBase64;
				}
				let url = this.vuex_config.baseUrl + this.vuex_user.avatar || '/static/aidex/tabbar/my_2.png';
				url = this.replaceAll(url, '\\', '/');
				//url = url.replace('/aidex/', this.vuex_config.baseUrl + '/');
				/* alert(url); */
				return url;
			}
		},
		onReady() {
			//this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			chooseAvatar() {
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						destWidth: 200, // 输出图片宽高
						rectWidth: 200, // 裁剪框的宽高
						fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					}
				})
			},
			submit() {
				console.log("提交");
				console.log(this.model);
				this.$u.api.user.saveUserInfo(this.model).then(res => {
					if(res.code == '200'){
						this.vuex_user.avatar = res.imgUrl;
						this.$u.vuex('vuex_user', this.vuex_user);
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: function () {
							   uni.navigateBack();
							}
						});
					}else{
						this.$u.toast(res.msg);
					}
				});
			},
			cancel() {
				uni.navigateBack();
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				} else {
					this.$u.toast('请稍后重试');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	.u-form {
		background: #fff;
		padding: 0 15px;
	}

	.u-size-medium {
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20px;
		font-size: 28rpx;
		background-color: rgba(0, 0, 0, 0.1);
		color: #fff;
		border: 1px solid #5186e7;
	}

	.u-hairline-border:after {
		border: 1px solid #5186e7 !important;
	}

	.input-placeholder {
		text-align: right;
	}

	.u-input {
		text-align: right !important;
	}

	.u-form-item {
		font-size: 36rpx;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		align-items: center;

	}

	.user-images {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10px;
	}

	.user-name {
		font-size: 32rpx;
		color: #000000;

		span {}

		.user-other {
			font-size: 26rpx;
			color: #999999;
			font-weight: normal;
		}

		.code {
			background-color: #5186e7;

		}
	}
</style>
